<template>
  <div>
    <common-heads />
    <img src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF" alt="">
    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
        { required: true, message: '请填写用户名' },
        ]"
      />
      <van-field
        v-model="user.pwd"
        type="password"
        name="pwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <!-- 登录表单 -->
     <van-button @click="$router.push('/login')">到登录页</van-button>   
 </div>
</template>

<script>
import CommonHeads from '../../components/CommonHeads.vue'
import {doRegister} from '_api'
import { Toast } from 'vant';
  export default {
    
    components:{
      CommonHeads
    },
    data(){
      return{
        user:{
          username:'',
          pwd:''
        }
      }
    },
    methods:{
      onSubmit(params){
        // 注册
        doRegister(params).then(res =>{
          if(res.data.code===0){
            //弹出注册成功提示跳转到登录页
            Toast.success({
               message:'注册成功',
               duration:1000,
               onClose:() =>{
                 this.$router.replace('/login')
               }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
img{
  width: 100%;
  margin-top: 46px;
}
.van-form{
  margin-top: -8px;
}
</style>